Kyber exposes a set of SVG icons that are usable as React components.

pnpm i @emoney/kyber-icons

import { IconFileGif } from '@emoney/kyber-icons';

Icons are sized relative to the text around them. To make them larger or smaller, set the font size of the icon or the parent element accordingly.

Result

Live Editor

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

Color can be customized with the color prop. Setting the prop to currentColor will allow the SVG to inherit the color of the parent element. All valid CSS values for colors (e.g., variables, hex, rgba, etc.) are supported.

Result

Live Editor

<div style={{ color: 'rebeccapurple' }}>
	<KyberIcons.IconDiamond01 color="currentColor" style={{ fontSize: '3rem' }} />
</div>

Props are spread onto the <svg> element, so any props supported by SVGs are supported on these Icons.

All Icons

Result

Live Editor

function Example() {
	const [filter, setFilter] = React.useState('');

	const filteredIcons = Object.fromEntries(
		Object.entries(KyberIcons).filter(([name]) =>
			name.toLowerCase().includes(filter.toLowerCase()),
		),
	);

	return (
		<>
			<Search onChange={setFilter} />
			<div
				style={{
					display: 'grid',
					gridTemplateColumns: 'repeat(auto-fill, 100px)',
					gridGap: '2rem',
					fontSize: '3rem',
				}}
			>
				{Object.keys(filteredIcons).map((icon) => {
					const Component = KyberIcons[icon];
					return (
						<div className="text-center">
							<Component />
							<br />
							<div className="fs-xxs">{icon}</div>
						</div>
					);
				})}
			</div>
		</>
	);
}

render(<Example />);